<template>
  <div v-if="data.length === 0" class="loading">
    <p>数据加载中...</p>
  </div>
  <div v-else class="city-info">
    <div class="city-name">
      <p v-if="addCity">你正在预览{{ city }}的天气信息,可以通过右上角的"+"号按钮保存起来</p>
      <p v-else>你正在预览{{ city }}的天气信息</p>
    </div>
    <div class="info-box">
      <p>当日气温是：{{ temp }}℃</p>
      <p>当日天气是：{{ weather }}</p>
      <p>当日风向是：{{ windDir }}</p>
      <p>当日风力是：{{ getWindPow(windPow) }}</p>
    </div>
    <WeatherChart v-if="data.length > 0" :data="data" />
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue';

import { useRoute } from 'vue-router';
import { getWeather } from '@/api/index.js';
import WeatherChart from '@/components/WeatherChart.vue';
import { useWeatherStore } from '@/stores/weather.js';
const route = useRoute();
const adcode = ref(route.params.adcode);

const weatherStore = useWeatherStore();
const addCity = computed(() => {
  return weatherStore.addCity;
});

const city = ref('');

watch([() => city.value, () => adcode.value], ([newCity, newAdcode]) => {
  weatherStore.isExist(newCity);
  weatherStore.setCityInfo({
    city: newCity,
    adcode: newAdcode,
});
});

const data = ref([]);
const temp = ref('');
const weather = ref('');
const windDir = ref('');
const windPow = ref('');

const getWindPow = (windPow) => {
  if (windPow === '微风') {
    return '≤3级';
  }
  if (windPow === '3-4级') {
    return '≤4级';
  }
  if (windPow === '4-7级') {
    return '≤7级';
  }
  if (windPow === '8-12级') {
    return '≤12级';
  }
  if (windPow === '13-18级') {
    return '>18级';
  }
  return '未知';
};

const renderCityInfo = (data) => {
  city.value = data.forecast[0].city ? data.forecast[0].city : data.forecast[0].province;
  const hour = new Date().getHours();
  if (hour >= 18 || hour < 6) {
    temp.value = data.forecast[0].infos[0].night.temperature;
    weather.value = data.forecast[0].infos[0].night.weather;
    windPow.value = data.forecast[0].infos[0].night.wind_power;
    windDir.value = data.forecast[0].infos[0].night.wind_direction;
  } else {
    temp.value = data.forecast[0].infos[0].day.temperature;
    weather.value = data.forecast[0].infos[0].day.weather;
    windPow.value = data.forecast[0].infos[0].day.wind_power;
    windDir.value = data.forecast[0].infos[0].day.wind_direction;
  }
};

onMounted(async () => {
  const res = await getWeather(adcode.value);
  data.value = res.result.forecast[0].infos;
  // console.log(data.value);
  renderCityInfo(res.result);
});
</script>

<style lang="scss" scoped>
$bg-color-l: #00668a; //背景颜色-浅
$bg-color-d: #004e71; //背景颜色-深
$font-color-w: #fff; //字体颜色-白

.loading {
  padding-top: 20px;
  width: 100%;
  height: 100dvh;
  font-size: 20px;
  color: $font-color-w;
  text-align: center;
}

.city-name p {
  padding: 10px 0;
  width: 100%;
  color: $font-color-w;
  background-color: $bg-color-d;
  font-size: 18px;
  text-align: center;
}
.info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
  margin-bottom: 10px;

  border-bottom: 1px solid #1a7696;
  color: $font-color-w;

  font-size: 18px;
}
</style>
